<template>
	<view class="page">

		<view v-if="!current" @click="show = true" class="u-flex u-row-between u-padding-20 u-margin-bottom-20 "
			style="border: 3rpx solid #3464D6; width: 700rpx;margin: auto;border-radius:10rpx;margin-top: 20rpx;">
			<view>
				{{date || '时间筛选'}}
			</view>
			<view>
				<u-icon name="calendar-fill" color="#3464D6" size="50"></u-icon>
			</view>
		</view>


		<view v-else>
			<view class="u-flex u-padding-20 u-row-between">
				<view style="font-weight: bold;">入场时间:</view>
				<view class="u-flex u-flex-1">
					<view class="timeBlock" @click="cdate('dateStare')">{{dateStare || '请选择开始'}}</view>
					<view class="u-margin-left-20">-</view>
					<view class="timeBlock" @click="cdate('dateEnd')">{{dateEnd || '请选择结束'}}</view>
				</view>
			</view>

			<view class="u-flex  u-row-between" style="padding: 0 20rpx 20rpx 20rpx;">
				<view style="font-weight: bold;">支付时间:</view>
				<view class="u-flex u-flex-1">
					<view class="timeBlock" @click="cdate('payStare')">{{payStare || '请选择开始'}}</view>
					<view class="u-margin-left-20">-</view>
					<view class="timeBlock" @click="cdate('payEnd')">{{payEnd || '请选择结束'}}</view>
				</view>
			</view>
			<view class="u-margin-bottom-20 u-margin-left-20">
				<u-button size="mini" type="primary" @click="find">查询</u-button>
			</view>


		</view>


		<view>
			<u-picker @confirm="sureTime" mode="time" v-model="Timeshow" :params='params' :end-year='endyear'>
			</u-picker>
		</view>


		<u-gap bg-color="#f1f1f1" height="10"></u-gap>

		<u-tabs :list="nav" :is-scroll="false" :current="current" @change="changenav"></u-tabs>

		<List :list="list" @end="end" v-if="!current"></List>


		<view>
			<view style=" background: #3E75F0;width: 700rpx;height: 30rpx;margin: auto;border-radius: 40rpx;"></view>
			<view class="heng " v-for="(item,index) in list" :key="index" 
				style="position: relative;top:-7rpx;z-index: 999; border-radius:0 0 20rpx 20rpx; 
				   box-shadow: 0 15rpx 15rpx  rgba(173, 173, 173, 0.2); width: 650rpx;margin:0 auto 30rpx auto;">
                 <view class="circle"></view>
				<view class=" " style="padding:  20rpx; border-bottom: 1rpx dashed  #adadad;">
					<view class=" u-flex u-row-between" style=" margin-bottom: 20rpx;">
						<view class="u-type-primary u-font-30">{{item.cn || '万能洗'}}</view>
						<view class="u-flex" @click="end(item)">
							<u-icon size="34" :color="item.status!==1?'#4076F3 ':'#D61D16'" :name="item.status!==1?'file-text-fill ':'warning-fill'"></u-icon>
							<view class="u-font-24 u-margin-left-5" :style="{color:item.status!==1?'#4076F3 ':'#D61D16'}"> {{item.status!==1?' 已完成 ':'结束订单'}}</view>
						</view>
					</view>
					<view class="u-font-22  u-flex u-row-between">
						<view>订单ID：{{item.outTradeNo}}</view>
						<view>车位：{{item.carportName}}号</view>
					</view>

					<view class="u-type-primary u-font-24 u-margin-top-10">{{item.nickname}}</view>

				</view>


				<view style="padding: 20rpx;border-radius:0 0 20rpx 20rpx;">
					<view style="line-height: 40rpx;font-size: 22rpx;">
						<view class="">
							联系方式：{{item.mobile}}
						</view>
						<view>入场时间：{{item.createTime}}</view>
						<view>支付时间：{{item.payTime}}</view>
						<view>服务时间：{{item.minute}}分钟</view>
						<view class="u-flex u-row-between">
							<view>订单金额：￥{{item.totalMoney}}</view>
							<view>优惠金额：￥{{item.saleMoney}}</view>
						</view>
						<view class="u-type-error">实付金额：￥{{item.balance}}</view>
					</view>
				</view>


			</view>

		</view>



		<u-loadmore :status="initial.status" />
		<u-calendar v-model="show" mode="range" @change="change"></u-calendar>

	</view>
</template>

<script>
	import loader from '@/common/loadPage.js';
	import List from './components/carList.vue';
	export default {
		components: {
			List
		},
		mixins: [loader],
		data() {

			return {
				dateStare: "",
				dateEnd: '',
				payStare: "",
				payEnd: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				Timeshow: false,
				tabbar: [],
				nav: [{
					name: '充值订单'
				}, {
					name: '洗车订单'
				}],
				current: 0,
				list: [],
				initial: {
					geturl: "/api/alliance/orderList",
					parm: {
						create_time: '',
						pay_time: '',
						store_id: '',
						date: "",
						status: 0,
						order_type: 2
					},
					isPage: true
				},
				show: false,

				date: '',

				endyear: '',

			}
		},
		async onLoad(options) {
			if (options.id) {
				this.initial.parm.store_id = options.id
			}

			this.endyear = new Date().getFullYear();
			this.getGoods()
		},
		methods: {

			find() {

				if (!this.dateStare && !this.dateEnd && !this.payStare && !this.payEnd) return this.$u.toast('请选择时间');
				if (new Date(this.dateStare).getTime() > new Date(this.dateEnd).getTime()) return this.$u.toast('入场时间错误');
				if (new Date(this.payStare).getTime() > new Date(this.payEnd).getTime()) return this.$u.toast('支付时间错误');

				this.initial.parm.create_time = this.dateStare + ' ' + '-' + ' ' + this.dateEnd
				this.initial.parm.pay_time = this.payStare + ' ' + '-' + ' ' + this.payEnd
				this.initial.page = 1;
				this.getGoods()
			},
			sureTime(e) {
				let {
					year,
					month,
					day,
					hour,
					minute,
					second
				} = e;

				this[this.Timeshow] = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
				console.log(e)
			},
			cdate(e) {
				this.Timeshow = e
			},
			end(item) {
                 if(item.status!==1)return
				this.$u.post('/api/alliance/finish', {
					order_id: item.id
				}).then(res => {
					this.$refs.uToast.show({
						title: '订单结束成功',
						type: 'success',
						callback: () => {
							this.initial.page = 1;
							this.getGoods()
						}
					})
				}).catch(err => {

				})
			},
			change(e) {
				var {
					endDate,
					startDate
				} = e;
				const date = startDate + ' ' + '-' + ' ' + endDate
				this.initial.parm.date = date;
				this.date = date;
				this.initial.page = 1;
				this.getGoods()
			},
			changenav(e) {
				this.current = e;
				this.initial.page = 1;
				if (e == 0) {
					this.initial.parm.order_type = 2;
					this.initial.parm.create_time = '';
					this.initial.parm.pay_time = '';
					this.initial.parm.date = '';
				} else {
					this.initial.parm.order_type = 1;
					this.initial.parm.create_time = '';
					this.initial.parm.pay_time = '';
					this.initial.parm.date = '';
				}

				this.getGoods()
			}

		}
	}
</script>


<style>
	.list {
		background: #fff;
		width: 700rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		position: relative;
	}

	.timeBlock {
		border: 3rpx solid #3464D6;
		width: 45%;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		font-size: 22rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.heng {
		position: relative;
	}

	.heng::after {
		content: '';
		width: 100%;
		height: 8rpx;
		position: absolute;
		top: 0;
		background: linear-gradient(to bottom, #BCCEFC, #f0f4fc);
	}

	.circle {
		position: relative;
		
	}

	.circle::after {
		content: '';
		width: 40rpx;
		height: 40rpx;
		background:  #fff;
		box-shadow:  0 5rpx 0 0  #f0f0f0 inset;
		transform: rotate(90deg);
		position: absolute;
		border-radius: 100%;
		top: 150rpx;
		left: -20rpx;
        z-index: 999;

	}
	.circle::before {
		content: '';
		width: 40rpx;
		height: 40rpx;
		background:  #fff;
		box-shadow:  0 5rpx 0 0  #f0f0f0 inset;
		transform: rotate(270deg);
		position: absolute;
		border-radius: 100%;
		top: 150rpx;
		right: -20rpx;
	    z-index: 999;
	
	}
</style>
